import gulp from 'gulp';
//  在gulp语句中做if判断
import gulpif from 'gulp-if';
// 处理文件拼接
import concat from 'gulp-concat';
//  使用webpack进行项目打包
import webpack from 'webpack';
// 结合这个打包把两个东西合并起来
import gulpWebpack from 'webpack-stream';
//  文件重命名标志
import named from 'vinyl-named';
// 文件修改以后，浏览器自动刷新功能
import livereload from 'gulp-livereload';
//处理文件信息流的。。。管道拼接
import plumber from 'gulp-plumber';
// 文件重命名的包
import rename from 'gulp-rename';
// 处理JS和CSS压缩的一个包
import uglify from 'gulp-uglify';
//  在命令行工具输出的一些包，，，文字颜色什么的
import {log,colors} from 'gulp-util';
//  对命令行参数进行解析的包。。我们自己写的
// 里面导入了处理命令行参数的包 yargs。
//  gulp xxxx
import args from './util/args';
//  书写gulp任务 scripts
gulp.task('scripts',()=>{
  //  打开文件，形成流，使用plumber插件，进行管道拼接
  return gulp.src(['app/js/index.js'])
    .pipe(plumber({
      errorHandle:function(){

      }
    }))
    //  文件重命名
    .pipe(named())
    //对JS进行编译，借助webpack加载babel将ES6转换为ES5或者ES3
    //   null没什么用，，第三个参数是用来处理错误的
    //  babelrc.是babel的转换配置文件，，这里转换的是es2015
    .pipe(gulpWebpack({
      module:{
        loaders:[{
          test:/\.js$/,
          loader:'babel'
        }]
      }
    }),null,(err,stats)=>{
      log(`Finished '${colors.cyan('scripts')}'`,stats.toString({
        chunks:false
      }))
    })
    //   js文件处理完毕之后文件输出到某一个地方
    //  server是服务端
    //   app/js/index.js拷贝到server/public/js。。并且对文件进行重命名
    .pipe(gulp.dest('server/public/js'))
    //  文件重命名为cp.min.js
    .pipe(rename({
      basename:'cp',
      extname:'.min.js'
    }))
    //   压缩JS
    .pipe(uglify({compress:{properties:false},output:{'quote_keys':true}}))
    //  重新存储
    .pipe(gulp.dest('server/public/js'))
    // 监听文件 浏览器刷新
    .pipe(gulpif(args.watch,livereload()))
})
